<template>
    <view>
        <!-- 图片弹出层 -->
        <uni-popup ref="popupImg" :type="type" :animation="popupAnimation">
            <view class="popup-imgbox" :style="popupInfo.popupStyle">
                <view>
                    <image
                        class="popup-imgbox-image"
                        :show-menu-by-longpress="true"
                        :src="popupInfo.popup_img"
                    ></image>
                </view>
                <view>
                    <text>{{ popupInfo.popup_title }}</text>
                </view>
            </view>
        </uni-popup>

        <!-- 基本弹出层 -->
        <uni-popup
            ref="popupBase"
            :type="type"
            :animation="popupAnimation"
            :maskClick="false"
            @change="change"
        >
            <view class="popup-content-box">
                <view class="popup-content">
                    <text>{{ popupInfo.popup_msg }}</text>
                </view>
                <view class="popup-content-close">
                    <u-icon
                        @click="hidePopup"
                        name="close-circle"
                        color="#FFFFFF"
                        size="50"
                    ></u-icon>
                </view>
            </view>
        </uni-popup>

        <!-- 消息提示 -->
        <uni-popup ref="popupMessage" type="message" @change="change">
            <uni-popup-message
                :type="msgType"
                :message="popupInfo.popup_msg"
                :duration="2000"
            ></uni-popup-message>
        </uni-popup>

        <!-- 对话框 -->
        <uni-popup ref="popupDialog" type="dialog" @change="change">
            <uni-popup-dialog
                :type="msgType"
                :title="popupInfo.popup_dialog_title"
                :content="popupInfo.popup_dialog_content"
                :before-close="true"
                :confirmText="popupInfo.popup_dialog_confirm_text"
                :closeText="popupInfo.popup_dialog_close_text"
                :confirm-type="popupInfo.popup_dialog_confirm_type"
                :mpAppid="popupInfo.popup_dialog_confirm_appid"
                :mpPage="popupInfo.popup_dialog_confirm_page"
                @confirm="dialogConfirm"
                @close="dialogClose"
            ></uni-popup-dialog>
        </uni-popup>

        <!-- 提交信息 -->
        <uni-popup ref="dialogInput" type="dialog" @change="change">
            <uni-popup-dialog
                mode="input"
                :title="popupInfo.popup_dialog_title"
                :value="dialogValue"
                :placeholder="dialogPlaceholder"
                @confirm="dialogInputConfirm"
            ></uni-popup-dialog>
        </uni-popup>

        <!-- 分享示例 -->
        <uni-popup ref="popupShare" type="share" @change="change">
            <uni-popup-share
                title="分享到"
                @select="shareSelect"
            ></uni-popup-share>
        </uni-popup>
    </view>
</template>

<script>
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue';
export default {
    components: {
        uniPopupMessage,
        uniPopupDialog,
        uniPopupShare
    },
    props: {
        popupAnimation: {
            type: [Boolean],
            default: true
        },
        popupType: {
            type: [String, Number],
            default: ''
        },
        popupInfo: {
            type: [Object, Array],
            default: function() {
                return {};
            }
        }
    },
    data() {
        return {
            message: '',
            type: 'center',
            msgType: 'success',
            dialogPlaceholder:'',
            dialogValue:''
        };
    },
    watch: {
        popupMsg(nval, oval) {
            this.message = nval;
        }
    },
    methods: {
        promise(time = 0) {
            let promise = new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve();
                }, time);
            });
            return promise;
        },
        async open(type) {
            await this.promise(2000);
            switch (this.popupType) {
                case 0:
                    this.type = type || 'center';
                    this.$refs.popupImg.open();
                    break;
                case 1:
                    this.type = type || 'center';
                    this.$refs.popupBase.open();
                    break;
                case 2:
                    this.openMsg(type || 'success');
                    break;
                case 3:
                    this.msgType = type || 'success';
                    this.openDialog(type || 'success');
                    break;
                case 4:
                    this.$refs.dialogInput.open();
                    break;
                case 5:
                    this.$refs.popupShare.open();
                    break;
                default:
                    break;
            }
        },
        openMsg(type) {
            this.message = this.popupMsg;
            switch (type) {
                case 'success':
                    this.msgType = 'success';
                    break;
                case 'warn':
                    this.msgType = 'warn';
                    break;
                case 'info':
                    this.msgType = 'info';
                    break;
                case 'error':
                    this.msgType = 'error';
                    break;
            }
            this.$refs.popupMessage.open();
        },
        /**
         * 打开消息提示
         * @param {Object} type
         */
        openDialog(type) {
            switch (type) {
                case 'success':
                    this.message = this.popupMsg;
                    break;
                case 'warn':
                    this.message = this.popupMsg;
                    break;
                case 'info':
                    this.message = this.popupMsg;
                    break;
                case 'error':
                    this.message = this.popupMsg;
                    break;
            }
            this.$refs.popupDialog.open();
        },
        hidePopup() {
            this.$refs.popupBase.close();
        },
        /**
         * 选择内容
         */
        shareSelect(e, done) {
            this.dialogClose(done);
            this.$emit('shareSelect', { e: e, done: done });
        },
        /**
         * 对话框点击确认按钮
         */
        dialogConfirm(done) {
            console.log(123);
            this.$emit('dialogConfirm', done);
        },
        /**
         * 对话框的确定事件
         */
        dialogInputConfirm(done, val) {
            console.log(321);
            this.$emit('dialogInputConfirm', { value: val, done: done });
        },
        /**
         * 对话框关闭按钮
         */
        dialogClose(done) {
            done();
        },
        /**
         * popup 状态发生变化触发
         * @param {Object} e
         */
        change(e) {
            console.log('popup ' + e.type + ' 状态', e.show);
            this.$emit('change', e);
        }
    },
    /**
     * 拦截应用返回事件，仅仅 app 端生效
     */
    onBackPress() {}
};
</script>
<style>
/* 头条小程序组件内不能引入字体 */
/* #ifdef MP-TOUTIAO */
@font-face {
    font-family: uniicons;
    font-weight: normal;
    font-style: normal;
    src: url('~@/static/uni.ttf') format('truetype');
}

/* #endif */

/* #ifndef APP-NVUE */
page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #efeff4;
    min-height: 100%;
    height: auto;
}

view {
    font-size: 14px;
    line-height: inherit;
}

.example {
    padding: 0 15px 15px;
}

.example-info {
    padding: 15px;
    color: #3b4144;
    background: #ffffff;
}

.example-body {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    font-size: 14px;
    background-color: #ffffff;
}

/* #endif */
.example {
    padding: 0 15px;
}

.example-info {
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
    padding: 15px;
    color: #3b4144;
    background-color: #ffffff;
    font-size: 14px;
    line-height: 20px;
}

.example-info-text {
    font-size: 14px;
    line-height: 20px;
    color: #3b4144;
}

.example-body {
    flex-direction: column;
    padding: 15px;
    background-color: #ffffff;
}

.word-btn-white {
    font-size: 18px;
    color: #ffffff;
}

.word-btn {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    height: 48px;
    margin: 15px;
    background-color: #007aff;
}

.word-btn--hover {
    background-color: #4ca2ff;
}

.example-body {
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
    padding: 5px 15px;
}

.popup-content-box {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    align-content: center;
}

.popup-content {
    width: 80%;
    background-color: #fff;
    padding: 15px;
    border-radius: 20upx;
}

.popup-content-close {
    margin-top: 30upx;
}

/* #ifndef APP-NVUE */
.button {
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* #endif */

.button {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 40px;
    margin: 0 15px;
}

.button-text {
    color: #fff;
    font-size: 14px;
}

.message {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: center;
    padding: 15px 0;
}

.dialog {
    padding: 15px 0;
}

.dialog-box {
    margin-left: 15px;
    margin-bottom: 15px;
}

.dialog-text {
    font-size: 14px;
    color: #666;
}

.share {
    padding: 15px 0;
}

.popup__success {
    color: #fff;
    background-color: #4cd964;
}

.popup__warn {
    color: #fff;
    background-color: #f0ad4e;
}

.popup__error {
    color: #fff;
    background-color: #dd524d;
}

.popup__info {
    color: #fff;
    background-color: #909399;
}

.popup-imgbox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    border-radius: 5px;
    padding-bottom: 15px;
}
.popup-imgbox-image {
    width: 265px;
    height: 265px;
    margin-bottom: 10px;
}
</style>
